<template>
  <div :class="['pui-radio-group', column && 'column']">
    <pui-radio
      v-for="(item, i) in list"
      :key="item.value"
      @onChange="changeRadioHandle"
      :disabled="disabled || item.disabled"
      :checked="modelValue === item.value"
      :data="item"
    >
    </pui-radio>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
export default defineComponent({
  name: 'pui-radio-group',
  emits: {
    'update:modelValue': (val: Object) => {},
  },
  props: {
    modelValue: {
      type: [String, Number],
      default: '',
    },
    list: {
      type: Array,
      default: [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    column: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const componentRef = reactive({
      activeItem: {},
    });
    const changeRadioHandle = (value: [String, Number]) => {
      ctx.emit('update:modelValue', value);
    };
    return {
      componentRef,
      changeRadioHandle,
    };
  },
});
</script>
